<!-- This a higher order component that composes `NavItemComponent`  -->
@let variantValue = variant();

@if (!hideIfEmpty() || nestedNavComponents().length > 0) {
  <bit-nav-item
    [text]="text()"
    [icon]="icon()"
    [route]="route()"
    [variant]="variantValue"
    [treeDepth]="treeDepth()"
    [relativeTo]="relativeTo()"
    [routerLinkActiveOptions]="routerLinkActiveOptions()"
    (mainContentClicked)="handleMainContentClicked()"
    [ariaLabel]="ariaLabel()"
    [hideActiveStyles]="parentHideActiveStyles()"
    [ariaCurrentWhenActive]="ariaCurrent()"
  >
    <ng-template #button>
      <button
        type="button"
        class="tw-ms-auto"
        [ngClass]="{
          'tw-transform tw-rotate-[90deg]': variantValue === 'tree' && !open(),
        }"
        [bitIconButton]="toggleButtonIcon()"
        [buttonType]="'nav-contrast'"
        (click)="toggle($event)"
        size="small"
        [attr.aria-expanded]="open().toString()"
        [attr.aria-controls]="contentId"
        [label]="['toggleCollapse' | i18n, text()].join(' ')"
      ></button>
    </ng-template>
    @if (variantValue === "tree") {
      <ng-container slot="start">
        <ng-container *ngTemplateOutlet="button"></ng-container>
      </ng-container>
    }
    <ng-container slot="end">
      <ng-content select="[slot=end]"></ng-content>
      @if (variantValue !== "tree") {
        <ng-container *ngTemplateOutlet="button"></ng-container>
      }
    </ng-container>
  </bit-nav-item>
  <!-- [attr.aria-controls] of the above button expects a unique ID on the controlled element -->
  @if (sideNavOpen()) {
    @if (open()) {
      <div
        [attr.id]="contentId"
        [attr.aria-label]="[text(), 'submenu' | i18n].join(' ')"
        role="group"
      >
        <ng-content></ng-content>
      </div>
    }
  }
}
